@{
    ViewBag.Title = "PDF转图片|PDF转JPG";
    ViewBag.keywords = "PDF转图片,PDF转JPG,PDF转png";
    ViewBag.description = "在线PDF转JPG工具,使用pdf.js将PDF转为JPG图片，PDF转JPG";
var host = Appsettings.app("BaseFile:HostUrl");}
<div class="layui-row layui-form layui-form-pane">
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">内容：</label>
        <div class="layui-input-block">
            <span class="file">
                <input type="file" id="input_file" class="file-input" accept=application/pdf onchange=loadPDF(this.files[0])>
                <span class="file-button">选择一个PDF文件</span>
            </span>
            <span>
                <label id="file_name"></label>
            </span>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <a class="layui-btn layui-btn-primary" onclick="prevPage();">上一页</a>
            <a class="layui-btn layui-btn-primary" onclick="nextPage();">下一页</a>
            <div class="layui-btn-group" id="out_type">
                <button type="button" class="layui-btn layui-btn-primary layui-btn-danger"><span>JPG</span></button>
                <button type="button" class="layui-btn layui-btn-primary"> <span>PNG</span></button>
            </div>
            <a class="layui-btn layui-btn" onclick="save();">保存本页</a>
            @*<a class="layui-btn layui-btn-normal" onclick="saveAll();">全部保存</a>*@
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <div class="layui-input-block">
            <p id=page_num>
                <div class="content-center mt-2">
                    <canvas id=preview class=bordered hidden></canvas>
                </div>
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <div><a></a></div>
    </div>
</div>
@section Scripts{
<script src="@host/lib/pdf/pdf.min.js"></script>
<script>
    pdfjsLib.GlobalWorkerOptions.workerSrc = '@host/lib/pdf/pdf.worker.min.js';
    const preview = document.getElementById('preview');
    const page_num = document.getElementById('page_num');
    const out_type = document.getElementById('out_type');
    let pdfFile, pdf, pageNum, context = preview.getContext('2d');
    out_type.querySelectorAll('.layui-btn-primary').forEach(function (btn) {
        btn.onclick = function () {
            out_type.querySelector('.layui-btn-danger').classList.remove('layui-btn-danger');
            btn.classList.add('layui-btn-danger');
        }
    });
    function loadPDF(file) {
        pdfFile = file;
        file_name.innerHTML = file.name;
        let reader = new FileReader();
        reader.onload = (e) => showPDF(e.target.result);
        reader.readAsDataURL(file);
    }
    function showPDF(url) {
        let loadingTask = pdfjsLib.getDocument(url);
        loadingTask.promise.then(function (doc) {
            pdf = doc; pageNum = 1;
            preview.hidden = false;
            readerPage()
        }, function (reason) { layer.alert(reason) });
    }
    function prevPage() {
        if (pageNum <= 1) { return; }
        pageNum--; readerPage()
    }
    function nextPage() {
        if (pdf === undefined || pdf === '' || pdf === null) { layer.msg("请选择一个PDF文件.", { icon: 2 }); return; }
        if (pageNum >= pdf.numPages) { return; }
        pageNum++; readerPage()
    }
    function readerPage(callback) {
        if (pdf === undefined || pdf === '' || pdf === null) { layer.msg("请选择一个PDF文件.", { icon: 2 }); return; }
        pdf.getPage(pageNum).then(function (page) {
            let scale = 1.5; let viewport = page.getViewport({ scale: scale }); preview.height = viewport.height; preview.width = viewport.width; let renderContext = { canvasContext: context, viewport: viewport }; page.render(renderContext).promise.then(callback);
        });
        page_num.innerText = `页码 : ${pageNum} / ${pdf.numPages}`;
    }
    function save() {
        let a = document.createElement('a');
        let event = new MouseEvent('click');
        let type = out_type.querySelector('.layui-btn-danger').innerText.toLowerCase();
        if (pdfFile === undefined || pdfFile === '' || pdfFile === null) { layer.msg("请选择一个PDF文件.", { icon: 2 }); return; }
        a.download = pdfFile.name + '-' + pageNum + '.' + type;
        a.href = preview.toDataURL(type === 'png' ? 'image/png' : 'image/jpeg');
        a.dispatchEvent(event)
    }
    function saveAll() {
        if (pdfFile === undefined || pdfFile === '' || pdfFile === null) { layer.msg("请选择一个PDF文件.", { icon: 2 }); return; }
        if (!islogin()) { login(); return false; }
        pageNum = 1; savePage()
    }
    function savePage() {
        if (pageNum > pdf.numPages) { layer.alert('全部保存成功'); return }
        readerPage(function () { save(); pageNum++; savePage(); });
    }
</script>
}